<template>
  <div class="container p-4 mx-auto">
    <h1 class="mb-4 text-2xl font-bold">邮箱校验工具</h1>

    <!-- 校验模式切换 -->
    <div class="mb-6">
      <div class="flex gap-4">
        <button
          @click="mode = 'single'"
          class="px-4 py-2 transition-colors rounded-lg"
          :class="mode === 'single' ? 'bg-blue-500 text-white' : 'bg-gray-100 hover:bg-gray-200'"
        >
          单个校验
        </button>
        <button
          @click="mode = 'batch'"
          class="px-4 py-2 transition-colors rounded-lg"
          :class="mode === 'batch' ? 'bg-blue-500 text-white' : 'bg-gray-100 hover:bg-gray-200'"
        >
          批量校验
        </button>
      </div>
    </div>

    <!-- 单个邮箱校验 -->
    <div v-if="mode === 'single'" class="space-y-4">
      <div class="flex gap-2">
        <input
          v-model="singleEmail"
          type="text"
          class="flex-1 px-4 py-2 border rounded-lg"
          :class="{ 'border-red-500': !isValidEmail(singleEmail) && singleEmail }"
          placeholder="请输入邮箱地址"
        />
        <button
          @click="validateSingle"
          class="px-6 py-2 text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-600"
        >
          校验
        </button>
      </div>

      <!-- 常用邮箱快速填充 -->
      <div class="flex flex-wrap gap-2">
        <span class="text-sm text-gray-500">常用邮箱：</span>
        <button
          v-for="email in commonEmails"
          :key="email"
          @click="singleEmail = email"
          class="px-3 py-1 text-sm transition-colors bg-gray-100 rounded hover:bg-gray-200"
        >
          {{ email }}
        </button>
      </div>

      <!-- 单个校验结果 -->
      <div v-if="singleResult !== null" class="mt-4">
        <div
          class="p-4 rounded-lg"
          :class="singleResult.isValid ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'"
        >
          <div class="font-medium">
            {{ singleResult.isValid ? '✓ 邮箱格式正确' : '✗ 邮箱格式错误' }}
          </div>
          <div class="mt-2 text-sm">
            <template v-if="singleResult.isValid">
              <div>域名: {{ singleResult.domain }}</div>
              <div>用户名: {{ singleResult.username }}</div>
            </template>
            <template v-else>
              <div>{{ singleResult.error }}</div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- 批量邮箱校验 -->
    <div v-else class="space-y-4">
      <div class="flex gap-2">
        <div class="flex-1">
          <textarea
            v-model="batchEmails"
            class="w-full h-64 px-4 py-2 font-mono border rounded-lg"
            placeholder="请输入邮箱地址，每行一个&#10;例如：&#10;example@gmail.com&#10;test@example.com"
          ></textarea>
        </div>
        <div class="space-y-2">
          <button
            @click="validateBatch"
            class="w-full px-4 py-2 text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-600"
          >
            校验
          </button>
          <button
            @click="clearBatch"
            class="w-full px-4 py-2 text-white transition-colors bg-gray-500 rounded-lg hover:bg-gray-600"
          >
            清空
          </button>
        </div>
      </div>

      <!-- 批量校验结果 -->
      <div v-if="batchResults.length > 0" class="space-y-2">
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-medium">校验结果</h3>
          <div class="text-sm text-gray-500">
            总计: {{ batchResults.length }} | 
            有效: {{ batchResults.filter(r => r.isValid).length }} | 
            无效: {{ batchResults.filter(r => !r.isValid).length }}
          </div>
        </div>
        
        <div class="overflow-hidden border rounded-lg">
          <table class="w-full border-collapse">
            <thead>
              <tr class="">
                <th class="px-4 py-2 text-left border-b">邮箱地址</th>
                <th class="px-4 py-2 text-left border-b">状态</th>
                <th class="px-4 py-2 text-left border-b">详情</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(result, index) in batchResults" :key="index" class="border-b">
                <td class="px-4 py-2 font-mono">{{ result.email }}</td>
                <td class="px-4 py-2">
                  <span
                    class="px-2 py-1 text-sm rounded"
                    :class="result.isValid ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
                  >
                    {{ result.isValid ? '有效' : '无效' }}
                  </span>
                </td>
                <td class="px-4 py-2 text-sm text-gray-600">
                  {{ result.isValid ? `${result.username}@${result.domain}` : result.error }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface ValidationResult {
  isValid: boolean
  email?: string
  username?: string
  domain?: string
  error?: string
}

const mode = ref<'single' | 'batch'>('single')
const singleEmail = ref('')
const batchEmails = ref('')
const singleResult = ref<ValidationResult | null>(null)
const batchResults = ref<ValidationResult[]>([])

// 常用邮箱示例
const commonEmails = [
  'example@gmail.com',
  'test@outlook.com',
  'user@163.com',
  'admin@qq.com'
]

// 邮箱验证正则表达式
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_\`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

// 验证单个邮箱
const isValidEmail = (email: string): boolean => {
  if (!email) return false
  return emailRegex.test(email)
}

// 解析邮箱
const parseEmail = (email: string): ValidationResult => {
  if (!email.trim()) {
    return {
      isValid: false,
      email,
      error: '邮箱地址不能为空'
    }
  }

  if (!isValidEmail(email)) {
    return {
      isValid: false,
      email,
      error: '邮箱格式不正确'
    }
  }

  const [username, domain] = email.split('@')
  return {
    isValid: true,
    email,
    username,
    domain
  }
}

// 验证单个邮箱
const validateSingle = () => {
  singleResult.value = parseEmail(singleEmail.value)
}

// 验证批量邮箱
const validateBatch = () => {
  const emails = batchEmails.value
    .split('\n')
    .map(e => e.trim())
    .filter(e => e)

  batchResults.value = emails.map(parseEmail)
}

// 清空批量输入
const clearBatch = () => {
  batchEmails.value = ''
  batchResults.value = []
}
</script> 